<template>
    <div class="login">
        <el-form :model="form">
            <div class="login-image">
                <img src="../../assets/login/header.png" class="image" />
            </div>
            <div class="login-item">
                <div class="login-left">
                    <p class="login-left-title">打开知乎APP</p>
                    <div class="login-left-erwm">
                        <img src="../../assets/login/erwm.png" class="erwm" alt="" />
                    </div>
                    <p class="login-left-message">其他扫码方式登录: 微信</p>
                    <ul>
                        <li><el-button round>下载知乎APP</el-button></li>
                        <li><el-button round>开通机构号</el-button></li>
                        <li><el-button round>无障碍模式</el-button></li>
                    </ul>
                </div>
                <div class="login-right">
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="账号登录" name="first">

                            <el-input v-model="form.name" placeholder="请输入手机/用户名" />
                            <el-input v-model="form.password" type="password" placeholder="请输入密码" />
                            <el-button type="primary" @click="loginSubmit">登录</el-button>
                            <div class="otherwise">
                                <div class="otherwise-title">其他登录方式</div>
                                <ul>
                                    <li><svg t="1709735858830" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="1562" width="200" height="200">
                                            <path
                                                d="M683.058 364.695c11 0 22 1.016 32.943 1.976C686.564 230.064 538.896 128 370.681 128c-188.104 0.66-342.237 127.793-342.237 289.226 0 93.068 51.379 169.827 136.725 229.256L130.72 748.43l119.796-59.368c42.918 8.395 77.37 16.79 119.742 16.79 11 0 21.46-0.48 31.914-1.442a259.168 259.168 0 0 1-10.455-71.358c0.485-148.002 128.744-268.297 291.403-268.297l-0.06-0.06z m-184.113-91.992c25.99 0 42.913 16.79 42.913 42.575 0 25.188-16.923 42.579-42.913 42.579-25.45 0-51.38-16.85-51.38-42.58 0-25.784 25.93-42.574 51.38-42.574z m-239.544 85.154c-25.384 0-51.374-16.85-51.374-42.58 0-25.784 25.99-42.574 51.374-42.574 25.45 0 42.918 16.79 42.918 42.575 0 25.188-16.924 42.579-42.918 42.579z m736.155 271.655c0-135.647-136.725-246.527-290.983-246.527-162.655 0-290.918 110.88-290.918 246.527 0 136.128 128.263 246.587 290.918 246.587 33.972 0 68.423-8.395 102.818-16.85l93.809 50.973-25.93-84.677c68.907-51.93 120.286-119.815 120.286-196.033z m-385.275-42.58c-16.923 0-34.452-16.79-34.452-34.179 0-16.79 17.529-34.18 34.452-34.18 25.99 0 42.918 16.85 42.918 34.18 0 17.39-16.928 34.18-42.918 34.18z m188.165 0c-16.984 0-33.972-16.79-33.972-34.179 0-16.79 16.927-34.18 33.972-34.18 25.93 0 42.913 16.85 42.913 34.18 0 17.39-16.983 34.18-42.913 34.18z"
                                                fill="#09BB07" p-id="1563"></path>
                                        </svg></li>
                                    <li><svg t="1709735903453" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="1701" width="200" height="200">
                                            <path
                                                d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                                                p-id="1702"></path>
                                        </svg></li>
                                    <li><svg t="1709735916012" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="1840" width="200" height="200">
                                            <path
                                                d="M456.448 857.856c-89.8048-2.7648-189.8496-13.568-280.2688-64.6656-61.9008-34.9696-102.4512-86.6816-110.9504-159.488-4.8128-41.216 8.0896-78.8992 25.8048-115.0464C117.2992 465.2032 156.16 421.2224 198.144 379.6992c47.9744-47.4624 100.5568-88.6272 164.3008-112.1792 25.2928-9.3696 53.1456-15.2576 80.0768-16.0768 51.5072-1.6384 75.0592 36.608 70.8096 88.2688-0.768 9.0624-4.1984 17.8688-5.12 26.9312-1.0752 10.5984 4.3008 16.9472 15.36 15.0016 10.5472-1.8432 21.0432-4.5056 31.1296-8.0896 38.8096-13.7728 77.9264-26.624 119.7568-22.1696 58.4704 6.2464 84.3776 52.6848 60.3648 106.3936-12.288 27.4432-11.4688 25.4464 17.5104 36.6592 23.7056 9.1648 48.7424 20.1728 67.0208 37.0688 42.6496 39.3216 45.5168 96.6656 13.4656 152.5248-34.6112 60.2624-87.8592 98.2528-149.76 125.5424-68.352 30.0544-140.3904 44.3904-226.6112 48.2816z m-6.6048-394.6496c-12.3904 0-24.832-0.8192-37.1712 0.1536-71.0144 5.632-138.0352 23.6544-195.8912 67.2768-33.2288 25.0368-58.7264 56.3712-63.8976 99.1232-6.9632 57.5488 21.1456 99.2256 67.1232 128.5632 88.4224 56.3712 184.9856 62.976 284.672 39.424 61.4912-14.5408 116.7872-41.7792 158.464-91.0848 29.0304-34.3552 45.4656-73.216 34.4576-119.3984-8.96-37.7344-34.2016-63.2832-66.0992-81.9712-55.8592-32.768-117.4528-43.8784-181.6576-42.0864zM715.52 154.368c95.3856 6.2464 173.8752 40.3968 220.0064 127.9488 25.4464 48.3328 29.9008 100.5056 17.8688 152.8832-2.6624 11.52-5.5296 23.04-8.6016 34.4576-4.7616 17.7664-25.6 32.256-46.3872 25.4464-15.6672-5.1712-26.3168-16.384-27.0848-33.1776-0.4608-9.472 1.4336-17.8176 4.6592-26.624 26.9312-73.6768-5.7856-159.1808-90.8288-193.8432-39.0144-15.9232-78.7456-24.5248-121.088-11.3664-22.1696 6.912-40.704-4.8128-44.9536-24.6784-4.352-20.2752 8.1408-41.5232 31.1296-45.5168 21.7088-3.84 41.1648-5.5296 65.28-5.5296z"
                                                fill="#F23D4F" p-id="1841"></path>
                                            <path
                                                d="M718.7456 275.4048c79.6672 1.5872 124.672 57.7024 109.0048 136.7552-2.7648 14.0288-13.2608 21.8624-26.624 19.9168-14.08-2.048-22.3744-13.056-21.7088-27.392 0.5632-12.2368 1.7408-24.7808-0.4096-36.6592-5.9904-33.0752-27.136-48.5888-60.8256-46.4896-9.1136 0.5632-18.2272 2.6112-27.3408 2.3552-12.6976-0.3584-21.504-6.6048-22.5792-20.3776-1.0752-13.4656 5.9392-21.7088 18.4832-24.2688 10.4448-2.2528 21.2992-2.6624 32-3.84z"
                                                fill="#FC4956" p-id="1842"></path>
                                            <path
                                                d="M548.7104 645.0688c1.3312 33.1264-12.6464 59.5456-36.8128 80.8448-57.9072 51.1488-146.2784 58.88-212.48 18.9952-30.4128-18.3296-42.4448-50.176-37.9392-91.0336 8.6528-78.592 62.9248-119.296 134.7072-125.5424 20.0704-1.7408 41.0624-1.024 60.7744 3.0208 58.9824 12.1856 91.6992 54.016 91.7504 113.7152z m-163.2256-6.2976c-10.8032-5.0688-23.0912-5.7344-34.7136-3.2768-4.5568 0.9728-9.0112 2.048-13.2608 3.7888-20.3776 8.192-34.9184 32.5632-31.5392 51.3024 2.9184 16.3328 20.2752 30.3104 41.0112 29.7984 11.9296-0.3072 24.6784-3.2256 35.4816-8.2944 20.7872-9.8304 30.3616-30.2592 25.4464-48.5888-2.9696-10.8544-11.1616-19.4048-22.4256-24.7296z m70.3488-15.5648c-4.5568-9.2672-16.2816-12.9536-25.4976-8.2944-7.8336 3.9424-12.1344 10.752-12.0832 18.2784 0.0512 10.7008 5.2736 17.3056 16.2304 17.8176 11.5712 0.5632 24.9344-12.4928 22.7328-23.9616a18.176 18.176 0 0 0-1.3824-3.84z"
                                                fill="#F23D4F" p-id="1843"></path>
                                            <path
                                                d="M876.1344 209.3056c-43.52-34.816-98.4064-50.8416-160.5632-54.9376-24.1664 0-43.6224 1.6896-65.28 5.4784-22.9888 3.9936-35.4816 25.2416-31.1296 45.5168 4.2496 19.8656 22.784 31.5904 44.9536 24.6784 42.3424-13.1584 82.0736-4.5568 121.088 11.3664 55.552 22.6304 88.576 66.9696 97.4336 115.5072 1.6896-17.0496 2.6624-34.2528 2.6624-51.712-0.0512-32.768-3.2768-64.768-9.1648-95.8976zM828.2624 540.672c-2.7648-3.1744-5.6832-6.2464-8.9088-9.216-18.2784-16.896-43.3152-27.8528-67.0208-37.0688-28.9792-11.2128-29.7472-9.1648-17.5104-36.6592 23.9616-53.7088-1.9456-100.1472-60.3648-106.3936-41.8304-4.4544-80.9472 8.3968-119.7568 22.1696-10.0864 3.584-20.5824 6.2464-31.1296 8.0896-11.0592 1.9456-16.4352-4.4032-15.36-15.0016 0.9216-9.0624 4.352-17.8688 5.12-26.9312 4.2496-51.6608-19.3024-89.856-70.8096-88.2688-26.9312 0.8192-54.784 6.7072-80.0768 16.0768-63.744 23.552-116.3776 64.7168-164.3008 112.1792-41.9328 41.5232-80.8448 85.4528-107.1104 138.9568-17.7664 36.1472-30.6688 73.8304-25.8048 115.0464 8.5504 72.8064 49.1008 124.5184 110.9504 159.488 37.2736 21.0944 76.2368 35.2256 115.4048 44.8512 12.288 0.768 24.6784 1.3312 37.1712 1.3312 219.2384 0 408.832-121.7536 499.5072-298.6496z m-165.0688 165.9392c-41.6768 49.3056-96.9728 76.544-158.464 91.0848-99.6864 23.552-196.2496 16.9984-284.672-39.424-45.9776-29.3376-74.0864-71.0144-67.1232-128.5632 5.1712-42.8032 30.6688-74.0864 63.8976-99.1232 57.856-43.6224 124.8768-61.6448 195.8912-67.2768 12.3392-0.9728 24.7808-0.1536 37.1712-0.1536 64.1536-1.792 125.7472 9.3184 181.7088 42.0864 31.8976 18.688 57.1392 44.2368 66.0992 81.9712 10.9056 46.1824-5.4784 85.0432-34.5088 119.3984z"
                                                fill="#FC4956" p-id="1844"></path>
                                            <path
                                                d="M715.5712 154.368c-24.1664 0-43.6224 1.6896-65.28 5.4784-22.9888 3.9936-35.4816 25.2416-31.1296 45.5168 4.2496 19.8656 22.784 31.5904 44.9536 24.6784 19.6096-6.0928 38.656-7.4752 57.344-5.6832 4.8128-22.3744 8.0384-45.3632 9.8816-68.6592-5.2736-0.512-10.496-0.9728-15.7696-1.3312zM152.8832 629.76c5.1712-42.8032 30.6688-74.0864 63.8976-99.1232C274.6368 487.0144 341.6576 468.992 412.672 463.36c12.3392-0.9728 24.7808-0.1536 37.1712-0.1536 45.4144-1.2288 89.5488 3.9936 131.328 18.7392 37.888-38.5024 69.8368-82.3808 94.5152-130.3552-0.4096-0.0512-0.8192-0.1536-1.28-0.2048-41.8304-4.4544-80.9472 8.3968-119.7568 22.1696-10.0864 3.584-20.5824 6.2464-31.1296 8.0896-11.0592 1.9456-16.4352-4.4032-15.36-15.0016 0.9216-9.0624 4.352-17.8688 5.12-26.9312 4.2496-51.6608-19.3024-89.856-70.8096-88.2688-26.9312 0.8192-54.784 6.7072-80.0768 16.0768-63.744 23.552-116.3776 64.7168-164.3008 112.1792-41.9328 41.5232-80.8448 85.4528-107.1104 138.9568-17.7664 36.1472-30.6688 73.8304-25.8048 115.0464 0.2048 1.8432 0.5632 3.584 0.8192 5.376 27.9552 5.376 56.6272 8.7552 85.9136 9.984-0.1024-6.2464 0.1536-12.6464 0.9728-19.3024zM686.6944 279.1424c-12.5952 2.6112-19.5584 10.8032-18.4832 24.2688 1.024 13.1584 9.1648 19.3536 20.9408 20.224 6.8096-15.36 12.8-31.1296 18.0736-47.2064-6.912 0.6656-13.7728 1.3312-20.5312 2.7136z"
                                                fill="#FF5C64" p-id="1845"></path>
                                            <path
                                                d="M473.9072 256.512c-8.96-3.6352-19.4048-5.4784-31.3856-5.12-26.9312 0.8192-54.784 6.7072-80.0768 16.0768-63.744 23.552-116.3776 64.7168-164.3008 112.1792-23.3472 23.0912-45.6192 47.0016-65.3824 72.8064 137.7792-23.04 258.0992-94.6688 341.1456-195.9424z"
                                                fill="#FF716E" p-id="1846"></path>
                                            <path
                                                d="M456.96 531.4048c-19.6608-4.0448-40.704-4.7616-60.7744-3.0208-69.7856 6.0416-122.8288 44.7488-133.7344 119.04 131.9424-24.9344 216.832-78.848 241.7664-96.4096-13.056-9.1648-28.8768-15.8208-47.2576-19.6096z"
                                                fill="#FF5C64" p-id="1847"></path>
                                        </svg></li>
                                </ul>
                            </div>

                        </el-tab-pane>
                        <el-tab-pane label="注册" name="second">
                            <el-input v-model="form.name" placeholder="请输入手机/用户名" />
                            <div class="code-btn">
                                <el-input v-model="form.yanzhengma" placeholder="请输入验证" />
                                <el-link type="primary">获取验证码</el-link>
                            </div>
                            <el-input v-model="form.password" type="password" placeholder="请输入密码" />
                            <el-button type="primary">注册</el-button>
                            <p class="agreement">注册即代表同意用户协议</p>
                        </el-tab-pane>

                    </el-tabs>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useAuthStore } from '../../stores/auth'
import { authenticate } from '../../api/auth'
import { useRouter } from 'vue-router'
const router = useRouter()
const activeName = ref('first')
const form = reactive({
    name: '',
    password: '',
    yanzhengma: '',
})
const loginSubmit = async () => {
    console.log(form)
    if (form.name && form.password) {
        // 验证用户名和密码是否正确，如果正确就将token存入到浏览器中
        let ret = await authenticate(form.name, form.password)
        console.log(ret, ret.data)
        if (ret.status == 200) {
            useAuthStore().login(ret.data.token)
            // this.$router.push('/')
            router.push('/')
        }
        
    }
}
</script>
<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    background: url('../../assets/login/back.jpeg') no-repeat top center;
    background-size: cover;
    background-color: #B8E5F8;

    .login-image {
        text-align: center;
        padding: 60px;
    }

    .login-image .image {
        width: 128px;
        height: 81px;
    }

    .login-item {
        display: flex;
        height: 420px;
        position: absolute;
        left: 50%;
        bottom: 0;
        // top: 50%;
        transform: translate(-50%, -10%);

        .login-left {
            width: 320px;
            background-color: #fff;
            border-right: 1px solid #ddd;
            padding: 20px;
            text-align: center;

            .login-left-title {
                line-height: 23px;
                font-weight: 600;
                font-size: 16px;
                padding-top: 40px;
            }

            .login-left-erwm {
                margin: 10px 0px;

                img {
                    width: 180px;
                    height: 180px;
                }
            }

            ul {
                display: flex;
                list-style-type: none; // 去掉默认的点
                margin-top: 20px;

                .el-button {
                    font-size: 10px;
                }

                li {
                    margin: 0 5px;
                }
            }

            .login-left-message {
                line-height: 23px;
                font-weight: 600;
            }
        }

        .login-right {
            width: 430px;
            background-color: #fff;
            padding: 20px 20px;

            .el-input {
                margin-top: 20px;

                .el-el-input__wrapper {
                    padding: 7px;
                }
            }

            .el-button {
                width: 100%;
                margin-top: 20px;
                padding: 20px;
            }

            .otherwise {
                width: 100%;
                text-align: center;
                margin-top: 40px;
                position: relative;

                .otherwise-title {
                    color: #9198A4;
                    font-size: 12px;
                }

                .otherwise-title::before {
                    content: "";
                    position: absolute;
                    left: 30px;
                    top: 5px;
                    width: 124px;
                    height: 1px;
                    background-color: #eee;
                }

                .otherwise-title::after {
                    content: "";
                    position: absolute;
                    right: 30px;
                    top: 5px;
                    width: 124px;
                    height: 1px;
                    background-color: #eee;
                }

                ul {
                    display: flex;
                    list-style-type: none; // 去掉默认的点
                    margin: auto; // 据中
                    justify-content: space-between;
                    padding-top: 20px;
                    width: 200px;

                    li {
                        svg {
                            width: 30px;
                            height: 30px;
                            background-color: #f6f6f8;
                            border-radius: 50%;
                            padding: 5px;
                        }
                    }
                }
            }

            .code-btn {
                position: relative;

                .el-link {
                    position: absolute;
                    right: 10px;
                    top: 30px;
                    font-size: 16px;
                }
            }

            .agreement {
                text-align: center;
                margin-top: 20px;
                font-size: 12px;
                line-height: 19px;
                color: #9196a1;
            }
        }
    }
}
</style>